<template>
	<footer class="users">
		<ul>
			<!-- 这里是内容部分，给每一个li标签加上一个点击事件，当点击了li标签以后，就会将users中的position显示或隐藏起来 -->
			<li v-for="user in users" @click="user.isshow = !user.isshow">
				<!-- li标签使用v-for循环来显示users中的数据 -->
				姓名：{{user.name}}——{{user.age}}
				<!-- users的position由isshow来控制，当isshow为true时就显示position，反之则不显示 -->
				<h3 v-show="user.isshow">{{user.position}}</h3>
			</li>
		</ul>
		<button type="button" @click="deleteUser">删除一个用户</button>
	</footer>
</template>

<script>
	export default {
		name: "index_body",
		data() {
			return {
				// users是供li标签来显示的数据
				
			}
		},
		props:{
			users:{
				// 属性的一些属性
				type:Array,
				// 属性的格式
				required:true,
				// 是否必须传入
			}
		},
		methods:{
			deleteUser(){
				this.users.pop()
				// pop()方法将数组的最后一个元素删除，可用于改变数组长度
			}
		}
	}
</script>

<style scoped>
/* 	footer {
		width: 100%;
		height: 550px;
		background: #e7e7e7;
		color: #444;
		
	} */
	.users{
		width: 100%;
		max-width: 1200px;
		/* 最大宽度1200px */
		margin: 40px auto;
		padding: 0 20px;
		box-sizing: border-box;
		/* 元素的总高度和宽度包含内边距和边框(padding 与 border)，但是不包含margin  */
		/* 默认情况的值是content-box */
		font-size: 35px;
		font-weight: 700;
	}
	
	ul{
		display: flex;
		/* display 属性规定元素应该生成的框的类型 */
		flex-wrap: wrap;
		/* flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向 */
		/* wrap规定灵活的项目在必要的时候拆行或拆列,使元素不会超出容器 */
		list-style-type: none;
		/* list-style-type 属性设置列表项标记的类型,也就是列表之前的那个小图标 */
		padding: 0;
		/* 清除自带的padding */
	}
	
	li{
		flex-grow: 1;
		/* flex-grow 属性用于设置或检索弹性盒子的扩展比率 */
		flex-basis: 150px;
		/* flex-basis 属性用于设置或检索弹性盒伸缩基准值，规定灵活项目的初始长度 */
		text-align: center;
		/* text-align属性指定元素文本的水平对齐方式 */
		padding: 30px;
		border: 1px solid #444444;
		margin: 10px;
		cursor: pointer;
		/* cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状 */
		/* pointer是一只手的样式 */
	}
</style>
